<template>
  <div class="profile_setting">
    <div class="profile_setting_items" v-for="item in settingList" :key="item.id">
      <div class="profile_setting_items_left">
        <div class="profile_setting_items_left_up">{{ item.title }}</div>
        <div class="profile_setting_items_left_down">{{ item.desc }}</div>
      </div>
      <div class="profile_setting_items_right">
        <el-switch
          v-model="item.bool"
          size="large"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const settingList = ref([
  {
    id: 1,
    title: '邮件通知',
    desc: '开启后快递送达将会发送邮件通知',
    bool: false
  },
  {
    id: 2,
    title: '消息推送',
    desc: '开启后优惠商品好物将会推送到您的首页',
    bool: false
  }
])
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);
@primary-font-family: 'Helvetica';

.profile_setting {
  width: 100%;
  font-family: @primary-font-family;
  
  .profile_setting_items {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .profile_setting_items_left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: @primary-font-family;

      .profile_setting_items_left_up {
        color: rgb(20, 28, 29);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .profile_setting_items_left_down {
        color: rgb(163, 170, 171);
        font-size: 16px;
        font-weight: 400;
      }
    }

    .profile_setting_items_right {
      :deep(.el-switch) {
        --el-color-primary: #34C759;
      }
    }
  }

  .profile_setting_items:not(:last-child) {
    padding-bottom: 18px;
    border-bottom: 1px solid #A3AAAB33;
  }

  .profile_setting_items:not(:first-child) {
    padding-top: 18px;
  }
}
</style>